<template>
  <view class="order-detail">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <text class="back" @click="goBack">＜</text>
      <text class="nav-title">订单详情</text>
      <view class="nav-actions">
        <text class="nav-icon">⋯</text>
        <text class="nav-icon">⊙</text>
      </view>
    </view>

    <!-- 标签页 -->
    <view class="tab-bar">
      <view class="tab-item" :class="{ active: activeTab === 'info' }" @click="switchTab('info')">基本信息</view>
      <view class="tab-item" :class="{ active: activeTab === 'delivery' }" @click="switchTab('delivery')">交付信息</view>
    </view>

    <!-- 基本信息内容 -->
    <view class="content" v-if="activeTab === 'info'">
      <view class="info-container">
        <view class="info-item">
          <text class="info-label">订单号</text>
          <text class="info-value">{{ order.no || 'JS1345555333' }}</text>
        </view>

        <view class="info-item">
          <text class="info-label">发布时间</text>
          <text class="info-value">{{ order.date || '2025-3-12 12:11:12' }}</text>
        </view>

        <view class="info-item">
          <text class="info-label">辅导项目</text>
          <text class="info-value">{{ order.type || '作业' }}</text>
        </view>

        <view class="info-item">
          <text class="info-label">学习阶段</text>
          <text class="info-value">{{ order.stage || '本科' }}</text>
        </view>

        <view class="info-item">
          <text class="info-label">学习位置</text>
          <text class="info-value">{{ order.location || '国内' }}</text>
        </view>

        <view class="info-item">
          <text class="info-label">学习专业</text>
          <text class="info-value">{{ order.major || '会计' }}</text>
        </view>

        <view class="info-item">
          <text class="info-label">预算区间</text>
          <text class="info-value">{{ order.budget || '1000-2000元' }}</text>
        </view>

        <view class="info-section">
          <text class="section-title">需求描述</text>
          <view class="description-text">
            {{ order.description || '想要找一个辅导论文的老师，想要找一个辅导论文的老师想要找一个辅导论文的老师想要找一个辅导论文的老师想要找一个辅导论文的老师' }}
          </view>
        </view>

        <view class="info-section">
          <text class="section-title">老师要求</text>
          <view class="teacher-requirements">
            <view class="requirement-item">
              <text class="requirement-label">老师情况</text>
              <text class="requirement-tag">博士</text>
            </view>
            <view class="requirement-item">
              <text class="requirement-label">是否留学</text>
              <text class="requirement-tag no-requirement">不要求</text>
            </view>
            <view class="teacher-description">
              希望老师热情专业，有耐心希望老师热情专业，有耐心希望老师热情专业，有耐心希望老师热情专业，有耐心希望老师热情专业，有耐心。
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 交付信息内容 -->
    <view class="content" v-if="activeTab === 'delivery'">
      <view class="delivery-info">
        <!-- 辅导老师信息 -->
        <view class="teacher-section">
          <text class="teacher-label">辅导老师</text>
          <text class="teacher-link" @click="viewTeacher">张伟 ></text>
        </view>

        <!-- 黄色提示框 -->
        <view class="warning-box">
          <text class="warning-text">你段状态：</text>
          <text class="warning-text">待支付->已付款待交付->已验收</text>
          <text class="warning-text">当前一个阶段为已验收时，下个阶段自动变化得付款</text>
          <text class="warning-text">如果当前阶段为最后一个阶段，已验收后整个订单状态为待评价</text>
        </view>

        <!-- 交付阶段表格 -->
        <view class="delivery-table">
          <view class="table-header">
            <text class="header-cell stage">交付阶段</text>
            <text class="header-cell amount">阶段费用</text>
            <text class="header-cell status">阶段状态</text>
            <text class="header-cell action">操作</text>
          </view>

          <view class="table-row" v-for="(stage, index) in deliveryStages" :key="index">
            <text class="table-cell stage">{{ stage.name }}</text>
            <text class="table-cell amount">{{ stage.amount }}</text>
            <text class="table-cell status" :class="stage.statusClass">{{ stage.status }}</text>
            <view class="table-cell action">
              <button v-if="stage.canConfirm" class="confirm-btn" @click="confirmStage(index)">确认验收</button>
              <button v-if="stage.canPay" class="pay-btn" @click="payStage(index)">去支付</button>
            </view>
          </view>

          <view class="total-row">
            <text class="total-label">共5阶段</text>
            <text class="total-amount">13,000</text>
            <text class="total-status">进行中</text>
            <text class="total-action"></text>
          </view>
        </view>

        <!-- 注释说明 -->
        <view class="notes-section">
          <text class="notes-title">注释：</text>
          <text class="notes-item">1. 每个阶段需要先支付，老师收到支付信息后才会开始作业。</text>
          <text class="notes-item">2. 老师提交阶段支付后，请先确认是否合适的定价标准，还标后再点击确认验收。</text>
          <text class="notes-item">3. 所有阶段都确认验收后辅导老师才能提现。</text>
          <text class="notes-item">4. 如果和辅导老师之前差生分歧可以找客服进行协商。</text>
        </view>

        <!-- 详细信息表格 -->
        <view class="detail-table">
          <view class="detail-row">
            <text class="detail-label">阶段</text>
            <text class="detail-value">确认合作时填写的阶段</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">阶段金额</text>
            <text class="detail-value">确认合作时填写的阶段金额</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">阶段状态</text>
            <view class="detail-value">
              <text class="status-text">1. 共3个状态：待支付、待交付、已交付待验收、已验收</text>
              <text class="status-text">2. 待支付对应的操作是去支付，待交付对应的操作是确认交付</text>
              <text class="status-text">支付后状态变为待交付，确认交付后状态变为已验收</text>
            </view>
          </view>
          <view class="detail-row">
            <text class="detail-label">阶段设置</text>
            <view class="detail-value">
              <text class="status-text">总金额：阶段金额的汇总</text>
              <text class="status-text">状态：默认是进行中，当所有阶段的状态都变为已验收后，由进行中变为</text>
              <text class="status-text">已完成</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部操作按钮 -->
    <view class="bottom-actions">
      <button class="terminate-btn" @click="terminateOrder">终止辅导</button>
    </view>

    <!-- 终止辅导确认弹窗 -->
    <view class="terminate-modal" v-if="showTerminateModal" @click="closeTerminateModal">
      <view class="modal-content" @click.stop>
        <text class="modal-title">终止辅导相当于完成，变为待评价</text>
        <view class="modal-actions">
          <button class="modal-btn cancel-btn" @click="closeTerminateModal">取消</button>
          <button class="modal-btn confirm-btn" @click="confirmTerminate">确定</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useOrderStore } from '../../../store/order.js'
import { orderApi, constants } from '../../../api'

const orderStore = useOrderStore()
const orderId = ref('')
const activeTab = ref('info') // 当前激活的标签页
const showTerminateModal = ref(false) // 控制终止辅导弹窗显示

// 使用computed获取当前订单信息
const order = computed(() => {
  if (orderId.value) {
    return orderStore.getOrderById(orderId.value) || {}
  }
  return orderStore.currentOrder || {}
})

// 交付阶段数据
const deliveryStages = ref([
  {
    name: '第1阶段',
    amount: '1,000',
    status: '已验收',
    statusClass: 'completed',
    canConfirm: false,
    canPay: false
  },
  {
    name: '第2阶段',
    amount: '2,000',
    status: '已验收',
    statusClass: 'completed',
    canConfirm: false,
    canPay: false
  },
  {
    name: '第3阶段',
    amount: '3,000',
    status: '待交付',
    statusClass: 'pending',
    canConfirm: false,
    canPay: false
  },
  {
    name: '第4阶段',
    amount: '4,000',
    status: '已交付待验收',
    statusClass: 'waiting-confirm',
    canConfirm: true,
    canPay: false
  },
  {
    name: '第5阶段',
    amount: '3,000',
    status: '待交付',
    statusClass: 'pending',
    canConfirm: false,
    canPay: true
  }
])

const goBack = () => {
  uni.navigateBack()
}

const switchTab = (tab) => {
  activeTab.value = tab
}

// 查看老师详情
const viewTeacher = () => {
  uni.navigateTo({
    url: '/uniapp/pages/student/TeacherDetail?teacherId=1'
  })
}

// 确认验收
const confirmStage = (index) => {
  uni.showModal({
    title: '确认验收',
    content: '确定要验收该阶段的交付内容吗？',
    success: (res) => {
      if (res.confirm) {
        deliveryStages.value[index].status = '已验收'
        deliveryStages.value[index].statusClass = 'completed'
        deliveryStages.value[index].canConfirm = false
        uni.showToast({
          title: '验收成功',
          icon: 'success'
        })
      }
    }
  })
}

// 去支付
const payStage = (index) => {
  uni.showToast({
    title: '跳转支付页面',
    icon: 'loading'
  })
  // 这里可以跳转到支付页面
}

// 终止辅导
const terminateOrder = () => {
  showTerminateModal.value = true
}

// 关闭终止辅导弹窗
const closeTerminateModal = () => {
  showTerminateModal.value = false
}

// 确认终止辅导
const confirmTerminate = () => {
  // 更新订单状态为待评价
  orderStore.updateOrderStatus(order.value.id, 2)
  uni.showToast({
    title: '辅导已终止',
    icon: 'success'
  })
  showTerminateModal.value = false
  setTimeout(() => {
    uni.navigateBack()
  }, 1500)
}

onLoad((options) => {
  if (options && options.orderId) {
    orderId.value = options.orderId
  }
})
</script>

<style scoped>
.order-detail {
  min-height: 100vh;
  background: #f8f8f8;
  display: flex;
  flex-direction: column;
}

/* 顶部导航栏 */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 32rpx;
  background: #fff;
  border-bottom: 1rpx solid #eee;
}

.back {
  font-size: 36rpx;
  color: #333;
  padding: 0 16rpx;
}

.nav-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  flex: 1;
  text-align: center;
}

.nav-actions {
  display: flex;
  gap: 16rpx;
}

.nav-icon {
  font-size: 36rpx;
  color: #333;
  padding: 0 8rpx;
}

/* 标签页 */
.tab-bar {
  display: flex;
  background: #fff;
  border-bottom: 1rpx solid #eee;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 24rpx 0 16rpx 0;
  color: #888;
  border-bottom: 4rpx solid transparent;
  font-size: 28rpx;
}

.tab-item.active {
  color: #1e98d7;
  border-bottom: 4rpx solid #1e98d7;
  font-weight: bold;
}

/* 内容区域 */
.content {
  flex: 1;
  padding: 0 32rpx 120rpx 32rpx;
  background: #fff;
}

.info-container {
  padding: 32rpx 0;
}

/* 信息项 */
.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.info-label {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.info-value {
  font-size: 28rpx;
  color: #666;
  text-align: right;
}

/* 章节标题 */
.info-section {
  padding: 32rpx 0 0 0;
}

.section-title {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 16rpx;
}

/* 描述文本 */
.description-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  padding-bottom: 32rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

/* 老师要求 */
.teacher-requirements {
  padding-bottom: 32rpx;
}

.requirement-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 0;
}

.requirement-label {
  font-size: 28rpx;
  color: #333;
}

.requirement-tag {
  background: #1e98d7;
  color: #fff;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
}

.requirement-tag.no-requirement {
  background: #f5f5f5;
  color: #999;
}

.teacher-description {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  margin-top: 16rpx;
}

/* 交付信息 */
.delivery-info {
  padding: 32rpx 0;
}

/* 辅导老师部分 */
.teacher-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  margin-bottom: 32rpx;
}

.teacher-label {
  font-size: 28rpx;
  color: #333;
}

.teacher-link {
  font-size: 28rpx;
  color: #1e98d7;
}

/* 黄色提示框 */
.warning-box {
  background: #ffd54f;
  padding: 24rpx;
  border-radius: 8rpx;
  margin-bottom: 32rpx;
}

.warning-text {
  display: block;
  font-size: 26rpx;
  color: #333;
  line-height: 1.5;
  margin-bottom: 8rpx;
}

.warning-text:last-child {
  margin-bottom: 0;
}

/* 交付阶段表格 */
.delivery-table {
  border: 1rpx solid #e0e0e0;
  border-radius: 8rpx;
  margin-bottom: 32rpx;
  overflow: hidden;
}

.table-header {
  display: flex;
  background: #f5f5f5;
  border-bottom: 1rpx solid #e0e0e0;
}

.header-cell {
  flex: 1;
  padding: 24rpx 16rpx;
  font-size: 26rpx;
  color: #333;
  font-weight: bold;
  text-align: center;
  border-right: 1rpx solid #e0e0e0;
}

.header-cell:last-child {
  border-right: none;
}

.header-cell.stage {
  flex: 1.2;
}

.header-cell.amount {
  flex: 1;
}

.header-cell.status {
  flex: 1.2;
}

.header-cell.action {
  flex: 1.5;
}

.table-row {
  display: flex;
  border-bottom: 1rpx solid #e0e0e0;
}

.table-row:last-child {
  border-bottom: none;
}

.table-cell {
  flex: 1;
  padding: 24rpx 16rpx;
  font-size: 26rpx;
  color: #333;
  text-align: center;
  border-right: 1rpx solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.table-cell:last-child {
  border-right: none;
}

.table-cell.stage {
  flex: 1.2;
}

.table-cell.amount {
  flex: 1;
}

.table-cell.status {
  flex: 1.2;
}

.table-cell.action {
  flex: 1.5;
}

.table-cell.status.completed {
  color: #4caf50;
}

.table-cell.status.pending {
  color: #ff9800;
}

.table-cell.status.waiting-confirm {
  color: #2196f3;
}

.confirm-btn {
  background: #1e98d7;
  color: #fff;
  border: none;
  padding: 12rpx 24rpx;
  border-radius: 4rpx;
  font-size: 24rpx;
}

.pay-btn {
  background: #1e98d7;
  color: #fff;
  border: none;
  padding: 12rpx 24rpx;
  border-radius: 4rpx;
  font-size: 24rpx;
}

.total-row {
  display: flex;
  background: #f9f9f9;
  border-top: 2rpx solid #e0e0e0;
}

.total-label {
  flex: 1.2;
  padding: 24rpx 16rpx;
  font-size: 26rpx;
  color: #333;
  font-weight: bold;
  text-align: center;
  border-right: 1rpx solid #e0e0e0;
}

.total-amount {
  flex: 1;
  padding: 24rpx 16rpx;
  font-size: 26rpx;
  color: #f44336;
  font-weight: bold;
  text-align: center;
  border-right: 1rpx solid #e0e0e0;
}

.total-status {
  flex: 1.2;
  padding: 24rpx 16rpx;
  font-size: 26rpx;
  color: #ff9800;
  font-weight: bold;
  text-align: center;
  border-right: 1rpx solid #e0e0e0;
}

.total-action {
  flex: 1.5;
  padding: 24rpx 16rpx;
  border-right: none;
}

/* 注释说明 */
.notes-section {
  margin-bottom: 32rpx;
}

.notes-title {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 16rpx;
  display: block;
}

.notes-item {
  display: block;
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
  margin-bottom: 12rpx;
}

/* 详细信息表格 */
.detail-table {
  border: 1rpx solid #e0e0e0;
  border-radius: 8rpx;
  margin-bottom: 120rpx;
  overflow: hidden;
}

.detail-row {
  display: flex;
  border-bottom: 1rpx solid #e0e0e0;
  min-height: 80rpx;
}

.detail-row:last-child {
  border-bottom: none;
}

.detail-label {
  width: 160rpx;
  padding: 24rpx 16rpx;
  font-size: 26rpx;
  color: #333;
  font-weight: bold;
  background: #f5f5f5;
  border-right: 1rpx solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.detail-value {
  flex: 1;
  padding: 24rpx 16rpx;
  font-size: 26rpx;
  color: #666;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.status-text {
  display: block;
  line-height: 1.6;
  margin-bottom: 8rpx;
}

.status-text:last-child {
  margin-bottom: 0;
}

/* 底部操作按钮 */
.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24rpx 32rpx;
  background: #fff;
  border-top: 1rpx solid #eee;
  box-shadow: 0 -2rpx 8rpx rgba(0,0,0,0.05);
}

.terminate-btn {
  width: 100%;
  padding: 24rpx 0;
  background: #ffd54f;
  color: #333;
  border: none;
  border-radius: 8rpx;
  font-size: 32rpx;
  font-weight: bold;
  text-align: center;
}

/* 终止辅导弹窗 */
.terminate-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: #fff;
  border-radius: 16rpx;
  padding: 48rpx 32rpx 32rpx 32rpx;
  margin: 0 64rpx;
  min-width: 500rpx;
}

.modal-title {
  font-size: 32rpx;
  color: #333;
  text-align: center;
  margin-bottom: 48rpx;
  line-height: 1.5;
}

.modal-actions {
  display: flex;
  gap: 24rpx;
}

.modal-btn {
  flex: 1;
  padding: 20rpx 0;
  border: none;
  border-radius: 8rpx;
  font-size: 28rpx;
  text-align: center;
}

.cancel-btn {
  background: #f5f5f5;
  color: #666;
}

.confirm-btn {
  background: #1e98d7;
  color: #fff;
}
</style>
